import React from "react";

interface Props {
  title?: string;
  buttonGroups?: React.ReactNode[];
}

export default function Title(props: Props) {
  return (
    <div className="flex h-8 items-center justify-between gap-4">
      <span className="h-full text-xl leading-8">{props.title}</span>
      <div className="flex flex-1 justify-end gap-2">
        {props.buttonGroups?.map((item, index) => {
          return React.cloneElement(item as React.ReactElement, {
            key: index,
          });
        })}
      </div>
    </div>
  );
}
